<template>
	<div class="loader-container">
		<div class="loading"></div>
	</div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.loader-container {
	.loading {
		position: relative;
		width: 30px;
		height: 30px;
		border: 2px solid #c6c4f5;
		border-top-color: rgba(255, 255, 255, 0.2);
		border-right-color: rgba(255, 255, 255, 0.2);
		border-bottom-color: rgba(255, 255, 255, 0.2);
		border-radius: 100%;

		animation: circle infinite 1s linear;
	}

	@keyframes circle {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}
}
</style>
